<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@include file="../../include/meta.jsp"%>
<title>login-addressbook</title>
<%@include file="../../include/css.jsp"%>
<style type="text/css">
html, body {
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #222;
	background-position: center;
	background-size: cover;
}

.img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 0 auto;
}
</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div class="card" style="width: 450px; opacity: 0.85;">
		<div class="card-header text-center">
			<img class="img"
				src="${pageContext.request.contextPath}/resources/images/Clover.jpg">
			<h3>欢迎登录通讯录系统</h3>
		</div>
		<div class="card-body">

			<form action="${pageContext.request.contextPath}/user/singin.html"
				method="POST">
				<div class="input-group input-group-lg mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text"><i class="fas fa-user"></i></span>
					</div>
					<input type="text" class="form-control" name="name"
						placeholder="请输入用户名" value="${name}" autofocus required>
				</div>

				<div class="input-group input-group-lg mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text"><i class="fas fa-lock"></i></span>
					</div>
					<input type="password" class="form-control" name="password"
						placeholder="请输入用户密码" required>
				</div>

				<div class="input-group input-group-lg mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text"> <i
							class="fas fa-closed-captioning"></i>
						</span>
					</div>
					<input type="text" class="form-control" name="code"
						placeholder="请输入验证码" maxlength="4" required>
					<div class="input-group-append">
						<span class="input-group-text" style="padding: 0px;"> <img
							id="captchaImg" alt="验证码"
							src="${pageContext.request.contextPath}/capthca"
							style="cursor: pointer;" onclick="change()">
						</span>
					</div>
				</div>

				<div class="form-group float-right">
					<a href="javascript:;" onclick="change() ">看不清，换一个</a>
				</div>
				<button type="submit" class="btn btn-primary btn-lg btn-block">登录</button>
			</form>
			<div class="text-danger" style="padding-top: 5px;">${message}</div>

		</div>
		<div class="card-footer  text-center text-muted">
			&copy;&nbsp;&nbsp;&nbsp;唐杰1910070136&nbsp;&nbsp;&nbsp;</div>
	</div>
	<%@include file="../../include/js.jsp"%>
	
	<script type="text/javascript">
		function change() {
			$("#captchaImg").attr(
					"src",
					"${pageContext.request.contextPath}/capthca?t="
							+ new Date().getTime());
		}
		
		/* 实现背景动画效果 */
		 /* 实现背景动画 */
        // 可调参数
        var BACKGROUND_COLOR = "rgba(0,43,54,1)";   // 背景颜色
        var POINT_NUM = 100;                        // 星星数目
        var POINT_COLOR = "rgba(255,255,255,0.7)";  // 点的颜色
        var LINE_LENGTH = 10000;                    // 点之间连线长度(的平方)

        // 创建背景画布
        var cvs = document.createElement("canvas");
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight;
        cvs.style.cssText = "\
    position:fixed;\
    top:0px;\
    left:0px;\
    z-index:-1;\
    opacity:1.0;\
    ";
        document.body.appendChild(cvs);

        var ctx = cvs.getContext("2d");

        var startTime = new Date().getTime();

        //随机数函数
        function randomInt(min, max) {
            return Math.floor((max - min + 1) * Math.random() + min);
        }

        function randomFloat(min, max) {
            return (max - min) * Math.random() + min;
        }

        //构造点类
        function Point() {
            this.x = randomFloat(0, cvs.width);
            this.y = randomFloat(0, cvs.height);

            var speed = randomFloat(0.3, 1.4);
            var angle = randomFloat(0, 2 * Math.PI);

            this.dx = Math.sin(angle) * speed;
            this.dy = Math.cos(angle) * speed;

            this.r = 1.2;

            this.color = POINT_COLOR;
        }

        Point.prototype.move = function () {
            this.x += this.dx;
            if (this.x < 0) {
                this.x = 0;
                this.dx = -this.dx;
            } else if (this.x > cvs.width) {
                this.x = cvs.width;
                this.dx = -this.dx;
            }
            this.y += this.dy;
            if (this.y < 0) {
                this.y = 0;
                this.dy = -this.dy;
            } else if (this.y > cvs.height) {
                this.y = cvs.height;
                this.dy = -this.dy;
            }
        }

        Point.prototype.draw = function () {
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fill();
        }

        var points = [];

        function initPoints(num) {
            for (var i = 0; i < num; ++i) {
                points.push(new Point());
            }
        }

        var p0 = new Point(); //鼠标
        p0.dx = p0.dy = 0;
        var degree = 2.5;
        document.onmousemove = function (ev) {
            p0.x = ev.clientX;
            p0.y = ev.clientY;
        }
        document.onmousedown = function (ev) {
            degree = 5.0;
            p0.x = ev.clientX;
            p0.y = ev.clientY;
        }
        document.onmouseup = function (ev) {
            degree = 2.5;
            p0.x = ev.clientX;
            p0.y = ev.clientY;
        }
        window.onmouseout = function () {
            p0.x = null;
            p0.y = null;
        }

        function drawLine(p1, p2, deg) {
            var dx = p1.x - p2.x;
            var dy = p1.y - p2.y;
            var dis2 = dx * dx + dy * dy;
            if (dis2 < 2 * LINE_LENGTH) {
                if (dis2 > LINE_LENGTH) {
                    if (p1 === p0) {
                        p2.x += dx * 0.03;
                        p2.y += dy * 0.03;
                    } else return;
                }
                var t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg;
                ctx.strokeStyle = "rgba(255,255,255," + t + ")";
                ctx.beginPath();
                ctx.lineWidth = 1.5;
                ctx.moveTo(p1.x, p1.y);
                ctx.lineTo(p2.x, p2.y);
                ctx.closePath();
                ctx.stroke();
            }
            return;
        }

        //绘制每一帧
        function drawFrame() {
            cvs.width = window.innerWidth;
            cvs.height = window.innerHeight;
            ctx.fillStyle = BACKGROUND_COLOR;
            ctx.fillRect(0, 0, cvs.width, cvs.height);

            var arr = (p0.x == null ? points : [p0].concat(points));
            for (var i = 0; i < arr.length; ++i) {
                for (var j = i + 1; j < arr.length; ++j) {
                    drawLine(arr[i], arr[j], 1.0);
                }
                arr[i].draw();
                arr[i].move();
            }

            window.requestAnimationFrame(drawFrame);
        }

        initPoints(POINT_NUM);
        drawFrame();
	</script>
	
</body>
</html>